<template>
  <div class="content">
      <div class="first"> <span class="bule"></span> 新增职称</div>
      <div class="box">
          <div class="pass">编辑角色信息</div>
          <div class="confirm" >
              <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                  <el-form-item label="职称名称" prop="userName">
                      <el-input v-model="form.name" placeholder="请输入内容" style="width: 250px;"></el-input>
                    </el-form-item>
                  <el-form-item label="挂号费" prop="userName">
                      <el-input v-model="form.name" placeholder="请输入内容" style="width: 250px;"></el-input>
                    </el-form-item>
                  <el-form-item label="职称描述" prop="userName">
                      <el-input v-model="form.name" placeholder="请输入内容" style="width: 250px;"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="是否启用">
                      <el-switch v-model="form.isShow" @change="show"></el-switch>
                    </el-form-item>
                  
                    <el-form-item>
                      <el-button type="primary" @click="submitForm('ruleForm')" :disabled="!form.isShow">确认</el-button>
                      <!-- 事件确认跳转 -->
                      <el-button @click="resetForm('ruleForm')" type="primary" plain>取消</el-button>
                    </el-form-item>
              </el-form>
             
          </div>
      </div>
  </div>
</template> 
<script>
  export default {
    data() {
      return {
        rules: {
        userName: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
       },
        form: {
          isShow:false,
          name: '',
          region: '',
          date1: '',
          date2: '',
         
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
    methods: {
      // 开关按钮
    show(){    
// this.form.isShow=!this.form.isShow
    },
      submitForm(submit) {
        setTimeout(()=>{
          this.$router.push({path: 'role'})
        },500)
        
      }
    }
  }
</script>

<style scoped>
    .bule{
    vertical-align:3px;
     display: inline-block;
     width: 20px;
     height: 10px;
     border-radius: 999px;
     background: #006EFF;
     margin-right: 8px;
   }
  .content{
      width: 921px;
      min-height: 333px;  
      
  }
  .first{
      font-size: 20px;
      padding-top: 13px;
      padding-bottom: 22px;
     
  }
  .box{
      width: 100%;
      border: 1px solid #ccc;
      border-radius: 5px;
  }
  .pass{
      height: 40px;
      font-size: 10px;
      color: #006EFF;
      line-height: 40px;
      box-sizing: border-box;
      padding-left: 15px;
      background-color:  rgba(242, 242, 242, 1); 
      color:bl ;
  }
  .confirm{
      box-sizing: border-box;
      padding-top: 10px;
  }
  el-input{
      width: 250px;
  }
</style>